<script>
    var cabinetId;
    function nextPage(pageNo){
        $("#cabinet-listing").load("<?= $this->baseURI(); ?>planning/cabinet/list/0/"+pageNo);
    }
    function editCabinet(id){
        cabinetId = id;
        $("#edit-cabinet-form").load("<?= $this->baseURI(); ?>planning/cabinet/edit/"+id);
        $("#edit-cabinet-form" ).dialog( "open" );
    }
    function cabinetDetail(id,name){
        cabinet = id;
        $("#cabinet-detail").attr('title', name+' Detail');
        $(function() {	           
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#cabinet-detail" ).dialog({
                resizable: false,
                height:400,
                width:450,
                modal: true                
            });
            $("#cabinet-detail").load("<?= $this->baseURI(); ?>planning/cabinet/cabinetdetail/"+id);
        });      
        
    }
    function deleteCabinet(id){
                
        $(function() {	
           
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#delete-confirm" ).dialog({
                resizable: false,
                height:200,
                modal: true,
                buttons: {
                    "Delete": function() {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>planning/cabinet/delete/"+id,                            
                            success: function(msg){
                                $("#cabinet-listing").load("<?= $this->baseURI(); ?>planning/cabinet/list");
                            }
                        }); 
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            
        });
    }
    
    $(function() {		
        $( "#dialog:ui-dialog" ).dialog( "destroy" );        

        function updateTips( t ) {
            tips = $( ".validateTips" );
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }

        function checkLength( o, n, min, max ) {
            
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }        
                
        $( "#add-cabinet-form" ).dialog({
            autoOpen: false,
            height: 200,
            width: 450,
            modal: true,
            buttons: {
                "Add": function() {
                    var bValid = true;
                    var name = $( "#cabinetName" ),                    
                    status = $( "#status" ),
                    
                    allFields = $( [] ).add( name ).add( status ),
                    tips = $( ".validateTips" );
                    
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( name, "cabinet name", 2, 16 );
                                    
                    if ( bValid ) {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>planning/cabinet/add",
                            data: ({cabinetName : name.val(),status : status.val()}),
                            success: function(msg){
                                $("#cabinet-listing").load("<?= $this->baseURI(); ?>planning/cabinet/list");
                            }
                        });                       
                        $( this ).dialog( "close" );
                        $('#add-cabinet-form').html('');
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#add-cabinet-form').html('');
                }
            },
            close: function() {
                $('#add-cabinet-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
        
        $( "#edit-cabinet-form" ).dialog({
            autoOpen: false,
            height: 200,
            width: 350,
            modal: true,
            buttons: {
                "Edit": function() {
                    var bValid = true;
                    var name = $( "#cabinetName" ),                    
                    status = $( "#status" ),
                    
                    allFields = $( [] ).add( name ).add( status ),
                    tips = $( ".validateTips" );
                    
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( name, "cabinet name", 2, 16 );
                                        
                    if ( bValid ) {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>planning/cabinet/edit/"+cabinetId,
                            data: ({cabinetName : name.val(),status : status.val()}),
                            success: function(msg){
                                $("#cabinet-listing").load("<?= $this->baseURI(); ?>planning/cabinet/list");
                            }
                        });                       
                        $( this ).dialog( "close" );
                        $('#edit-cabinet-form').html('');
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#edit-cabinet-form').html('');
                }
            },
            close: function() {
                $('#edit-cabinet-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

    });

</script>
<div class="dataBoxOver">
    <div class="dataInnRep">
        <div class="dataInnTop" id="cabinet-listing">
            <?php echo $this->render('cabinet/list.phtml'); ?>	
        </div>	
    </div>
</div>
<div id="add-cabinet-form" title="Add cabinet"></div>
<div id="edit-cabinet-form" title="Edit cabinet"></div>
<div id="cabinet-detail"></div>
<div id="delete-confirm" title="Delete cabinet" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This cabinet will be permanently deleted. Are you sure?</p>
</div>